<template>
	<view class="body-view">
		<!--导航和状态栏-->
		<view class="state-navigation">
			<view class="slim_header_navigation d-flex a-center j-center" >
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">零钱明细</view>
				<view class="right_box">
					<!-- <image src="/static/center/dian.png" class="dian"></image> -->
				</view>
			</view>
		</view>
		<view style="height:calc(100rpx + var(--status-bar-height));"></view>
		<view class="scroll-view">
			<pullScroolView
				ref="scroll" 
				:back-top="false" 
				:pullDown="refresh" 
				:pullUp="scrolltolower">
				<view v-if="transactionData?.list?.length==0" class="scroll-data d-flex d-c a-center j-center">
					<image src="@/static/img/nodata.png" style="width: 360rpx;height: 360rpx;"></image>
					<text style="font-size: 28rpx;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #999999;">暂无记录</text>
				</view>
				<template v-for="(item, index) in transactionData.list" :key="index">
					<view class="date-count" v-if="isFirst(index)">
						<view class="date">{{moment(item.createTime, "YYYY-MM-DD HH:mm:ss").format('YYYY年MM月')}}</view>
						<view class="count d-flex a-center">
							<view class="month">月收入：¥{{centToYuan(item.incomeTotal)}}</view>
							<view class="reflect">月支出：¥{{centToYuan(item.outTotal)}}</view>
							<!--
							<view class="refund">退款：¥{{centToYuan(item.refundTotal)}}</view>
							<view class="reflect">提现：¥{{centToYuan(item.withdrawTotal)}}</view>
							-->
						</view>
					</view>
					<view class="transaction-month">
						<view @tap="goDetails(item)" class="transaction-row d-flex a-center" :style="getborderRadiusCss(index)">
							<view class="img-v d-flex a-center j-center">
								<image class="img" :src="transactionImg[(Number(item.type)-1)]"></image>
							</view>
							<view class="describe-date d-flex a-center">
								<view class="count">
									<view class="describe">{{item.statusName}}</view>
									
									<view class="date">{{moment(item.createTime, "YYYY-MM-DD HH:mm:ss").format('MM/DD HH:mm')}}</view>
								</view>
							</view>
							<view v-if="item.type=='1'" class="amount">
								<view class="amount-number">+{{centToYuan(item.amount)}}</view>
								<view v-if="item.type=='1'&&item.status=='1'" class="amount-state">待结算</view>
							</view>
							
							<view v-if="item.type=='2'" class="amount" style="color: #333333;">
								<view class="amount-number" style="color: #333333;">{{centToYuan(item.amount)}}</view>
								<view v-if="item.withdrawStatus=='211'" class="amount-state">提现成功</view>
								<view v-if="item.withdrawStatus=='212'" class="amount-state">提现失败</view>
								<view v-if="item.withdrawStatus=='213'" class="amount-state">审核中</view>
							</view>
							<view v-if="item.type=='3'" class="amount">
								<view class="amount-number" style="color: #333333;">{{centToYuan(item.amount)}}</view>
								<!--
								<view v-if="item.type=='3'&&item.status=='10'" class="amount-state">待审核</view>
								<view v-if="item.type=='3'&&item.status=='20'" class="amount-state" style="color: #1DC691;">提现成功</view>
								<view v-if="item.type=='3'&&item.status=='30'" class="amount-state">提现失败</view>
								-->
							</view>
							<view v-if="item.type=='4'" class="amount" style="color: #333333;">{{centToYuan(item.amount)}}</view>
						</view>
					</view>
				</template>
				<view style="height:100rpx;"></view>
			</pullScroolView>
		</view>
		
		<!-- 顶部位置占位 -->
		<!-- <view style="height:calc(100rpx + var(--status-bar-height));"></view> -->

		<!--
        <view class="content1 d-flex" style="top:calc(100rpx + var(--status-bar-height));">
            <view class="nodata" v-show="transactionData.list==null||transactionData.list.length<1">
                    <image
                        class="nodata-img"
                        src="/static/img/nodata.png"
                        alt=""
                    />

                    <view class="text">竟然什么都没有~</view>
            </view>
			<pullScroolView 
					style="height:calc(100vh - 200rpx - var(--status-bar-height) - 80rpx);background-color: red;"
					 ref="scroll" 
					 :back-top="false" 
					 :pullDown="refresh" 
					 :pullUp="scrolltolower"
					 >
				<template v-for="(item, index) in transactionData.list" :key="index">
					<view class="date-count" v-if="isFirst(index)">
						<view class="date">{{moment(item.createTime, "YYYY-MM-DD HH:mm:ss").format('YYYY年MM月')}}</view>
						<view class="count d-flex a-center">
							<view class="month">月收入：¥{{centToYuan(item.incomeTotal)}}</view>
							<view class="refund">退款：¥{{centToYuan(item.refundTotal)}}</view>
							<view class="reflect">提现：¥{{centToYuan(item.withdrawTotal)}}</view>
						</view>
					</view>
					<view class="transaction-month">
						<view class="transaction-row d-flex a-center" :style="getborderRadiusCss(index)">
							<view class="img-v d-flex a-center j-center">
								<image class="img" :src="transactionImg[(Number(item.type)-1)]"></image>
							</view>
							<view class="describe-date d-flex a-center">
								<view class="count">
									<view class="describe">{{item.statusName}}</view>
									
									<view class="date">{{moment(item.createTime, "YYYY-MM-DD HH:mm:ss").format('MM/DD HH:mm')}}</view>
								</view>
							</view>
							<view v-if="item.type=='1'" class="amount">
								<view class="amount-number">+{{centToYuan(item.amount)}}</view>
								<view v-if="item.type=='1'&&item.status=='1'" class="amount-state">待结算</view>
							</view>
							
							<view v-if="item.type=='2'" class="amount" style="color: #333333;">{{centToYuan(item.amount)}}</view>
							<view v-if="item.type=='3'" class="amount">
								<view class="amount-number" style="color: #333333;">{{centToYuan(item.amount)}}</view>
								<view v-if="item.type=='3'&&item.status=='10'" class="amount-state">待审核</view>
								<view v-if="item.type=='3'&&item.status=='20'" class="amount-state" style="color: #1DC691;">提现成功</view>
								<view v-if="item.type=='3'&&item.status=='30'" class="amount-state">提现失败</view>
							</view>
							<view v-if="item.type=='4'" class="amount" style="color: #333333;">{{centToYuan(item.amount)}}</view>
						</view>
					</view>
				</template>
				<view style="height:100rpx;"></view>
			</pullScroolView>
        </view>
		-->
	</view>
</template>

<script setup lang="tsx"  name="transaction">
import { ref } from "vue";

import { getTransaction } from "@/api/api";
import { userData as userDataStore } from "@/store/userData";
import { onLoad,onPageScroll } from "@dcloudio/uni-app";
import moment from 'moment'
import { centToYuan } from "@/utils/format";

onPageScroll((res) => {
    const scrollTop = res.scrollTop;
    if(res.scrollTop===0){
        backTop();
        setTimeout(()=>{
            uni.pageScrollTo({scrollTop:100});
        },100)
    }
});

const backTop = ()=>{
    scroll.value.onBackTop();
}

const goBack = () => {
	    uni.navigateBack();
};
let scrollTop = ref(0);
const goTransactionDetail = (index: number) => {
	let params = JSON.stringify(transactionData.value.list[index]);
	//console.log(param)
	uni.navigateTo({
		url:`/pages/transactionDetail/transactionDetail?params=`+params,
		//data:{params:params}
	});
};

const scroll = ref()

const userData: any = userDataStore();
let triggered = ref(false);
//let _freshing = ref(false);
//数据查询条件
let params = {
	//userId:userData.id,
	userId:userData.id,
	page:1,
	rows:15
}
let transactionData:any = ref({});
//下拉刷新数据
const refresh = () => {
	params.page = 1;//设置刷新时查询第一页
	getTransaction(params).then((res: any) => {
		params.page++;//设置下一页
		transactionData.value = res.data
	    setTimeout(()=>{
	        scroll.value.success();
	    },500)
	});
	/*
	if (_freshing.value) return;  
	_freshing.value = true;
	
	triggered.value = true;
	if (!triggered.value)triggered.value = true;//界面下拉触发，triggered可能不是true，要设为true  
	params.page = 1;//设置刷新时查询第一页
	getTransaction(params).then((res: any) => {
		params.page++;//设置下一页
		transactionData.value = res.data
		triggered.value = false;//触发onRestore，并关闭刷新图标
		//_freshing.value = false;
		console.log('transactionData.value')
		console.log(transactionData.value)
		console.log('res')
		console.log(res)
        setTimeout(()=>{
            scroll.value.success();
        },500)
	}); 
	*/
	//triggered.value = false;
}
const scrolltolower = () => {
	if(params.page>=transactionData.value.pages)return;
	getTransaction(params).then((res: any) => {
		params.page++;//设置下一页
		transactionData.value.list.push(...res.data.list)
	});
}
//页面加载完成后加载初始数据
onLoad(() => {
    setTimeout(() =>{
        uni.pageScrollTo({scrollTop:100});
    },100)
	//_freshing.value = false;
	refresh();
});
const transactionImg:any = ref([
	"../../static/image/income.png",//入账图标
	"../../static/image/expenditure.png",//退款图标
	"../../static/image/expenditure.png",////提现图标
	"../../static/image/income.png",
])
const withdrawType:any = ref(["微信","支付宝"]);
//根据日期字符串获取月份
const getMonthByStr = (dateTimeString:string) =>{
	const date = new Date(dateTimeString);
	const monthNumber = date.getMonth() + 1;
	return monthNumber;
}
//判断是否为当月第一条数据（页面第一条加圆角用）
const isFirst = (index: number) => {
	if(index==0)return true;
	if(getMonthByStr(transactionData.value.list[index].createTime)!=getMonthByStr(transactionData.value.list[(index-1)].createTime))return true
	return false;
}
//判断是否为当月最后一条数据或页面最后一条（页面最后加圆角用）
const isFinal = (index: number) => {
	if(index>=(transactionData.value.list.length-1))return true;
	if(getMonthByStr(transactionData.value.list[index].createTime)!=getMonthByStr(transactionData.value.list[(index+1)].createTime))return true
}
//获取行圆角样式
const getborderRadiusCss = (index: number) => {
	let css = "border-radius: 0 0 0 0;";
	if(isFirst(index)&&isFinal(index)){
		css = "border-radius: 10rpx 10rpx 10rpx 10rpx;"//是月首行与尾行4个圆角
	}
	if(isFirst(index)&&!isFinal(index)){
		css = "border-radius: 10rpx 10rpx 0 0;"//是月首行与不是尾行上面2个圆角
	}
	if(!isFirst(index)&&isFinal(index)){
		css = "border-radius: 0 0 10rpx 10rpx;"//不是月首行与是尾行下面2个圆角
	}
	return css;
}
const goDetails = (item:any) => {
	if(item.sourceCode){
		if(item.sourceCode.indexOf("redis:transfer:packet") > -1){
			uni.navigateTo({
				url: `/pages/transferDetails/transferDetails?transferId=${item.sourceCode}`
			});
		}
		if(item.sourceCode.indexOf("redis:red:packet") > -1){
			uni.navigateTo({
				url: `/pages/redDetails/redDetails?redId=${item.sourceCode}`
			});
		}
	}
}
</script>

<style lang="scss" scoped>
@import "./transaction.scss";
.body-view1{
    width: 750rpx;
    height: calc(100vh + 1px);
}
.content1{
	position:fixed;
    width:750rpx;
    left:0;
    right:0;
    bottom:0px;
    .scroll{
        width:750rpx;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }
}

</style>
